<template>
	<view>
		<!-- #ifdef MP -->
		<!-- 搜索框在小程序中显示 -->
		<search-input @click.native="navTo('/pages/search/search')"></search-input>
		<!-- #endif -->

		<!-- 头部轮播 -->
		<mxg-banner :bannerList="bannerList"></mxg-banner>

		<!-- 分类区 ( 展示排名前7的)，2行4列，8块，最后一块`全部分类` -->

		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption">
			<!-- 分类块 ( 展示排名前7的)，2行4列，8块，最后一块`全部分类` -->
			<category-box :categoryList="categoryList">
			</category-box>


			<!-- 热门推荐、近期上新、免费精选 、付费精品、 -->
			<view class="list-container">
				<swiper-course name="热门推荐" word="HOT" :courseData="hotCourseList"></swiper-course>
				<scroll-course name="近期上新" word="NEW" :courseData="newCourseList"></scroll-course>
				<swiper-course name="免费精选" word="FREE" :courseData="freeCourseList"></swiper-course>
				<list-course name="付费精品" word="NICE" :courseData="payCourseList"></list-course>
			</view>
		</mescroll-body>
		<!-- <view v-for="i in 100" :key="i">{{i}}</view> -->

	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	//引入接口
	import api from "@/api/course.js"
	// 搜索框组件
	import searchInput from '@/components/common/search-input.vue'
	// 头部轮播
	import mxgBanner from '@/components/common/mxg-banner.vue'
	// 分类区
	import categoryBox from './components/category-box.vue'
	//热门推荐
	import swiperCourse from './components/swiper-course.vue'
	// 左右滚动课程
	import scrollCourse from './components/scroll-course.vue'
	// 付费精品 +++
	import listCourse from './components/list-course.vue'
	export default {
		mixins: [MescrollMixin],
		components: {
			searchInput,
			mxgBanner,
			categoryBox,
			swiperCourse,
			scrollCourse,
			listCourse
		},
		data() {
			return {
				bannerList: [], //广告信息
				categoryList: [], //分类信息
				hotCourseList: [], //热门推荐信息
				newCourseList: [], //近期上新信息
				freeCourseList: [], //免费精选信息
				payCourseList: [], //付费精品信息
				downOption: { // 3. 下拉刷新
					offset: 50, // 下拉高度多少，开始刷新
				}
			}
		},
		onLoad() {
			// // #ifdef APP-PLUS
			// // 搜索框提示信息，只在APP中有
			// this.placeholderData()
			// // #endif
			// this.loadBannerData()
			// this.loadCateData()
			// this.loadHotCourseData()
			// this.loadNewCourseData()
			// this.loadFreeCourseData()
			// this.loadPayCourseData()
		},
		// 监听原生输入框点击事件
		onNavigationBarSearchInputClicked() {
			// 在 /common/mixin/mixin.js 中定义了,main.js全局引入了
			// this.navTo('/pages/search/search')
			uni.navigateTo({
				url: "/pages/search/search"
			})
		},

		// 监听原生标题栏按钮点击事件
		onNavigationBarButtonTap(e) {
			// 点击第1个按钮
			if (e.index === 0) {
				// 打开扫一扫功能
				uni.scanCode({
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						uni.navigateTo({
							url: `/pages/public/web-view?url=${res.result}`
						})
					}
				});
			}
		},

		// 监听原生输入框点击事件
		// onNavigationBarSearchInputClicked() {
		// 	// 在 /common/mixin/mixin.js 中定义了,main.js全局引入了
		// 	this.navTo('/pages/search/search')
		// },
		methods: {

			navTo() {
				uni.navigateTo({
					url: '../../pages/search/search',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			// 轮播图数据
			async loadBannerData() {
				// 不要少了 await, 位置1的广告
				const {
					data
				} = await api.getAdvertList(1)
				this.bannerList = data
				console.log(this.bannerList, '轮播图');
			}, //不要少了逗号

			// 分类数据
			async loadCateData() {
				// 加载分类信息, 不要少了 await, 
				const {
					data
				} = await api.getCategoryList()
				this.categoryList = data
				console.log(this.categoryList, "分类信息");
			},
			async loadHotCourseData() {
				// 热门推荐, 只要查询第1页，8条即可
				const {
					data
				} = await api.getList({
					sort: 'hot'
				}, 1, 8)
				// 注意：数据在 records 中
				this.hotCourseList = data.records
				// console.log('hotCourseList', this.hotCourseList)
			}, //不要少了逗号

			async loadNewCourseData() {
				// 近期上新, 只要查询第1页，8条即可
				const {
					data
				} = await api.getList({
					sort: 'new'
				}, 1, 8)
				// 注意：数据在 records 中
				this.newCourseList = data.records
				// console.log('newCourseList', this.newCourseList)
			}, //不要少了逗号

			async loadFreeCourseData() {
				// 免费精选, 只要查询第1页，10条即可。isFree是否免费：0收费，1免费
				const {
					data
				} = await api.getList({
					isFree: 1
				}, 1, 10)
				// 注意：数据在 records 中
				this.freeCourseList = data.records
				// console.log('freeCourseList', this.freeCourseList)
			},

			// async loadPayCourseData() {
			// 	// 付费精品 带分页功能,isFree是否免费：0收费，1免费
			// 	const {
			// 		data
			// 	} = await api.getList({
			// 		isFree: 0
			// 	})
			// 	this.payCourseList = data.records
			// 	// console.log('payCourseList', this.payCourseList)
			// },

			async upCallback(page) {
				//console.log('upCallback', page.num)
				// page.num 页码, 默认从1开始
				// page.size 页长, 默认每页10条

				// 如果是第1页，则是下拉刷新
				if (page.num === 1) {
					this.loadBannerData()
					this.loadCateData()
					this.loadHotCourseData()
					this.loadNewCourseData()
					this.loadFreeCourseData()
				}

				// 付费精品 带分页功能, isFree：0收费，1免费
				const {
					data
				} = await api.getList({
					isFree: 1
				}, page.num, page.size)
				// console.log('data', data)
				const curList = data.records

				// 如果是第一页需手动置空列表
				if (page.num == 1) this.payCourseList = [];
				//追加新数据
				this.payCourseList = this.payCourseList.concat(curList);

				// 请求成功, 隐藏加载状态，判断是否数据全部加载完（后台接口有返回列表的总数据量total)
				this.mescroll.endBySize(curList.length, data.total);
			},

			placeholderData() {
				//获取当前页面实例, 仅 App 支持写在APP-PLUS条件编译下
				let webview = this.$scope.$getAppWebview();
				// webview.setStyle() 接收WebviewStyles对象改变样式
				let arr = ['APP · 微信小程序', 'Java · SprinBoot', 'SpringCloud · SpringSecurity', 'Vue · React'];

				// 执行马上调用，如果在定时器自调用会报错，所以第一次放外面
				let i = 0;
				webview.setStyle({
					'titleNView': {
						"searchInput": {
							"placeholder": arr[i]
						}
					}
				})

				setInterval(() => {
					// 定时循环显示每个元素，3最后一个元素，又从0第1个元素开始
					i = i < 3 ? ++i : 0;
					webview.setStyle({
						'titleNView': {
							"searchInput": {
								"placeholder": arr[i]
							}
						}
					})
				}, 3000) // () 自调用第一次立即执行，但是ios会报错，所以在定时器外面执行第一次
			}
		},
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.list-container {
		padding: 0 30rpx;
	}
</style>
